<template>
  <div class="bg-gray-100 main">
    <ul>
      <li v-for="i in arr" :key="i.to" :class="`${route.path == i.to ? 'selected' : ''}`">
        <router-link :to="i.to">{{ i.name }}</router-link>
      </li>
    </ul>
  </div>
</template>
<script setup lang="ts">
import { useRoute } from "vue-router";
const route = useRoute();
const arr = [
  {
    to: "/",
    name: "工具",
  },
  {
    to: "/software",
    name: "快捷软件",
  },
  {
    to: "/task",
    name: "当前任务",
  },
  {
    to: "/setup",
    name: "设置",
  },
];
console.log(route);
</script>
<style lang="scss" scoped>
.main {
  padding: 4px;
  width: 300px;
  box-sizing: border-box;

  a {
    border-radius: 6px;
    padding-left: 10px;
    height: 35px;
    display: flex;
    align-items: center;
    font-size: 14px;
    transition: all 0.2s;
    margin: 5px 0;

    &:hover {
      background-color: #eaeaea;
    }
  }
}

.selected {
  background-color: #eaeaea;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    width: 3px;
    height: 50%;
    border-radius: 6px;
    background-color: #005a9e;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
